<!-- 选择器内选项 -->
<template>
    <div class="cm-selection-rendered cm-selector-dropdown-item" @click="change" :class="{'cm-focus-option' : value == selectedOnTime && value == focusOption,'cm-selected-option' : value == selectedOnTime}" 
    >
        <div class="cm-selected-value"><slot></slot></div>
    </div>
</template>

<script>
export default {
  data () {
    return {
         hoverOption:-1
    };
  },

  props:[
      'value',//绑定key值
  ],

  inject:['getSelected','getFocusOption'],

  model:{

  },

  components: {},

  computed:{
      selectedOnTime(){
          return this.getSelected()
      },//获取选中的数据的唯一key值
      focusOption(){
          return this.getFocusOption()
      }
  },

  methods: {
      change(){
          console.log('value is',this.value)
          this.$parent.changeSelection(this.value)//调用cm-selector组件中的changeSelection方法更改选中的数据key值
          this.changeOptionStatus()
      },
      changeOptionStatus(){
          console.log('this.value',this.value)
            this.$parent.changeFocus(this.value)//调用父组件更改聚集高亮项目，
      }
  },
  created(){
  },

  watch:{
      selectedOnTime(newval){
          console.log('selectedOnTime:',newval)
      },
      focusOption(newval){
          console.log('focusoption',newval)
      }
  }
}

</script>
<style>

.cm-selected-option{
    transition: all 0.2s ease;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.707);
}
.cm-selector-dropdown-item:hover{
    transition: all 0.2s ease;
    background-color: rgba(138, 191, 255, 0.333);
}
.cm-focus-option{
    background-color: rgba(138, 191, 255, 0.333);
}

</style>